<template>
	<view class="applet-live">
		<view class="live-content">
			<scroll-view scroll-y="true" :style="'height:' + height + 'px'" @scrolltolower="loadingMore" @scroll="scroll">
				<view class="live-content-wrap">
					<!--#ifdef H5-->
					<view class="wrap-item"	v-for="(item, index) in liveList"	:key="index"	:style="{ backgroundImage: 'url(' + item.cover_img + ')' }"	@click="show_live_code(item.liveplayer_code_url)">
						<view class="live-wrap">
							<!-- <view class="live-time">{{ showDate(item.startTime * 1000) }} 开播 {{item.live_status}}</view> -->
							<view class="live-time" v-if="item.live_status == '102'">{{ showDate(item.startTime * 1000) }} 开播</view>
							<view class="live-time" v-else-if="item.live_status == '101'">直播中</view>
							<view class="live-time" v-else-if="item.live_status == '103'">直播已结束</view>
							<view class="live-time" v-else-if="item.live_status == '104'">禁播</view>
							<view class="live-time" v-else-if="item.live_status == '105'">直播间暂停</view>
							<view class="live-time" v-else-if="item.live_status == '106'">直播异常中断</view>
							<view class="live-time" v-else-if="item.live_status == '107'">直播已过期</view>
							<view class="live-title">{{ item.name }}</view>
							<view class="live-user">
								<image :src="item.avatarUrl" mode="aspectFill"></image>
								<view class="name">{{ item.anchorName }}</view>
							</view>
						</view>
					</view>
					<!--#endif-->

					<!--#ifdef MP-WEIXIN-->
					<view class="wrap-item" v-for="(item, index) in liveList" :key="index" :style="{ backgroundImage: 'url(' + item.cover_img + ')' }" @click="watchLive(item.roomId)">
						<view class="live-wrap">
							<!-- <view class="live-time">{{ showDate(item.startTime * 1000) }} 开播 {{item.live_status}}</view> -->
							<view class="live-time" v-if="item.live_status == '102'">{{ showDate(item.startTime * 1000) }} 开播</view>
							<view class="live-time" v-else-if="item.live_status == '101'">直播中</view>
							<view class="live-time" v-else-if="item.live_status == '103'">直播已结束</view>
							<view class="live-time" v-else-if="item.live_status == '104'">禁播</view>
							<view class="live-time" v-else-if="item.live_status == '105'">直播间暂停</view>
							<view class="live-time" v-else-if="item.live_status == '106'">直播异常中断</view>
							<view class="live-time" v-else-if="item.live_status == '107'">直播已过期</view>
							<view class="live-title">{{ item.name }}</view>
							<view class="live-user">
								<image :src="item.avatarUrl" mode="aspectFill"></image>
								<view class="name">{{ item.anchorName }}</view>
							</view>
						</view>
					</view>
					<!--#endif-->

					<!-- <view class="wrap-item">
						<view class="live-time">6月23日 20:30 开播</view>
						<view class="live-title">孩子出现的问题，如何更好的解决问题</view>
						<view class="live-user">
							<image src="" mode=""></image>
							<view class="name">爱笑的鱼</view>
						</view>
					</view> -->
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { wx_liveplayer_list, syn_live_status } from '@/utils/api.js';

export default {
	data() {
		return {
			token: this.$store.getters.getToken,
			liveList: [],
			last_page: null,
			per_page: null,
			current_page: 1,
			page: 1,
			pagesize: 6,
			oldLiveList: [],
			scrollTop: 0,
			oldTop: 0,
			showLive: false,
			scrollTop2: 0,
			height: 0
		};
	},
	created() {
		this.getList();
		this.height = parseInt(uni.getSystemInfoSync().windowHeight - this.height);
	},
	methods: {
		// 将时间戳转换为 m月d日 h:m
		showDate(time = +new Date()) {
			var date = new Date(time + 8 * 3600 * 1000);
			return date
				.toJSON()
				.substr(5, 11)
				.replace('T', '日 ')
				.replace(/-/g, '.')
				.replace('.', '月');
		},
		getList() {
			this.scrollTop = 0;
			this.videoList = [];
			this.page = 1;
			let data = {
				token: this.token,
				page: 1,
				pagesize: this.pagesize,
				apply_status: 'agree'
			};
			let that = this;
			wx_liveplayer_list(data).then(res => {
				if (res.status) {
					this.liveList = res.data.data;
					this.updata_room_status(this.liveList);
					this.last_page = res.data.last_page;
					console.log(this.liveList);
				} else {
					uni.showToast({
						title: res.msg,
						icon: 'none',
						duration: 2000
					});
				}
				console.log('获取直播列表');
			});
		},
		scroll(e) {
			this.scrollTop2 = e.detail.scrollTop;
		},
		loadingMore() {
			console.log('触发了loadingMore');
			this.page = this.page + 1;
			if (this.page > this.last_page) {
				uni.showToast({
					title: '没有更多了',
					icon: 'none',
					duration: 2000
				});
				return false;
			} else {
				let data = {
					token: this.token,
					page: this.page,
					pagesize: this.pagesize
				};
				wx_liveplayer_list(data).then(res => {
					if (res.status) {
						this.liveList = this.liveList.concat(res.data.data);
						this.updata_room_status(this.liveList);
						console.log('直播列表---------1111111111111111111》', this.liveList[0]);
						this.last_page = res.data.last_page;
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2000
						});
					}
					console.log('直播列表---------》', res);
				});
			}
		},
		watchLive(room) {
			console.log(room);
			let roomId = room; // 填写具体的房间号，可通过下面【获取直播房间列表】 API 获取
			let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/home/home', pid: 1 })); // 开发者在直播间页面路径上携带自定义参数（如示例中的path和pid参数），后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
			wx.navigateTo({
				url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
			});
		},

		// H5端显示小程序二维码
		show_live_code(image) {
			uni.previewImage({
				urls: [image],
				current: 0
			});
		},

		// 更新并添加房间状态
		updata_room_status(room_list) {
			for (let i = 0; i < room_list.length; i++) {
				if (new Date().getTime() / 1000 - room_list[i].last_syn_time > 60) {
					this.add_room_status(room_list[i]);
				}
			}
		},
		// 添加并同步直播状态
		add_room_status(room_info) {
			// console.log('准备修改直播状态')
			let that = this;
			let livePlayer = requirePlugin('live-player-plugin');
			// 首次获取立马返回直播状态
			livePlayer
				.getLiveStatus({ room_id: room_info.roomId })
				.then(res => {
					// 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期
					that.$set(room_info, 'live_status', res.liveStatus);
					let sync_time = new Date().getTime() / 1000;
					let params = { token: that.token, roomId: room_info.roomId, live_status: res.liveStatus, syn_time: sync_time };
					syn_live_status(params);
				})
				.catch(err => {
					console.log('get live status', err);
				});
			// 往后间隔1分钟或更慢的频率去轮询获取直播状态
			// setInterval(() => {
			// 		livePlayer.getLiveStatus({ room_id: room_info.roomId })
			// 				.then(res => {
			// 					// console.log('2直播状态进行了修改')
			// 						// 101: 直播中, 102: 未开始, 103: 已结束, 104: 禁播, 105: 暂停中, 106: 异常，107：已过期
			// 						that.$set(room_info,"live_status",res.liveStatus)
			// 						let sync_time = (new Date()).getTime()/1000
			// 						let params = {token:that.token,roomId:room_info.roomId,live_status:res.liveStatus,syn_time:sync_time}
			// 						syn_live_status(params)
			// 						console.log('2调用接口进行直播间状态同步')
			// 				})
			// 				.catch(err => {
			// 						console.log('get live status', err)
			// 				})
			// }, 61000)
		}
	}
};
</script>

<style scope>
.applet-live {
	margin-top: 88rpx;
}

.live-content-wrap {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 20rpx 20rpx 0 20rpx;
}
.wrap-item {
	position: relative;
	border-radius: 18rpx;
	margin-bottom: 20rpx;
	background-size: 340rpx 100%;
	width: 48%;
	height: 0;
	padding-bottom: 72%;
	overflow: hidden;
	background-position: center center;
	background-repeat: no-repeat;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	background-size: cover;
}

.wrap-item .live-time {
	position: absolute;
	top: 20rpx;
	height: 50rpx;
	line-height: 50rpx;
	padding: 0 20rpx 0 10rpx;
	font-size: 24rpx;
	background: linear-gradient(270deg, rgba(255, 64, 64, 1) 0%, rgba(255, 121, 62, 1) 100%);
	border-radius: 0px 24rpx 24rpx 0px;
	color: #fff;
}

.wrap-item .live-title {
	position: absolute;
	bottom: 100rpx;
	padding: 0 10rpx 0 10rpx;
	font-size: 28rpx;
	color: #fff;
}

.wrap-item .live-user {
	position: absolute;
	bottom: 10rpx;
	height: 80rpx;
	width: 100%;
	padding: 0 10rpx 0 10rpx;
}

.live-user image {
	float: left;
	width: 60rpx;
	height: 60rpx;
	margin-top: 10rpx;
	margin-right: 20rpx;
	border: 1px solid rgba(255, 255, 255, 1);
	border-radius: 50%;
}

.wrap-item .live-user .name {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	color: #fff;
	font-size: 28rpx;
}
</style>
